<template>
    <v-card>
      <VCardText>
        <VForm ref="queryFormRef">
          <VRow>
            <v-tabs class="mb-4 v-tabs-pill" v-model="queryParams.status" @update:modelValue="handleSearch" color="primary">
              <v-tab value="">全部</v-tab>
              <v-tab v-for="(value,key) in taskStatus" :key="key" :value="value.value">{{ value.key }}</v-tab>
            </v-tabs>
        </VRow>
        <VRow>
          <VCol cols="4">
            <AppTextField v-model="queryParams.title" placeholder="任务标题" />
          </VCol>
          <VCol cols="3" class="d-flex align-center ga-3">
              <VBtn prepend-icon="tabler-search" size="small" @click="handleSearch()">{{$t('tableOperate.search')}}</VBtn>
              <VBtn prepend-icon="tabler-restore" size="small" variant="outlined" @click="handleReset()">{{$t('tableOperate.clear')}}</VBtn>
          </VCol>
        </VRow>
      </VForm>
      </VCardText>
      <VDivider></VDivider>
      <VDataTableServer :loading="tableLoading" v-model:items-per-page="queryParams.pageSize" v-model:page="queryParams.pageNum" v-model="selected" :items="data" item-value="id" :items-length="total" :headers="headers" class="text-no-wrap">
        <template #item.operate="{ item }">
          <div class="d-flex operate__btn-group ga-2" >
            <v-btn size="small" @click="goDetail(item)">查看</v-btn>
            <v-btn size="small" @click="take(item)" :loading="loading" v-if="item.status === 1">接单</v-btn>
          </div>
        </template>
        <!-- pagination -->
        <template #bottom>
          <TablePagination v-model:page="queryParams.pageNum" v-model:items-per-page="queryParams.pageSize" :total-items="total"  @update:page="getList" @update:items-per-page="getList"/>
        </template>
      </VDataTableServer>
    </v-card>
  </template>



<script setup>
import { listTask,NORMAL_TASK_STATUS } from "@/api/task";
import { ref } from "vue";
import { useI18n } from 'vue-i18n'
import { useRouter } from "vue-router";
import { takeTask } from "@/api/task";
const { t } = useI18n()

const loading = ref(false)

const {proxy} = getCurrentInstance()

const router = useRouter()

const taskStatus = ref([])

for (const [key, value] of Object.entries(NORMAL_TASK_STATUS)) {
  taskStatus.value.push({
    key: value,
    value: key,
  });
}


const queryFormRef = ref()

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  isAsc: 'desc',
  orderByColumn: 'createTime',
  title: undefined,
  status: undefined
});

const handleReset = () => {
  queryFormRef.value.reset()
  // dateTimePicker.value.onClear()
  handleSearch()
}


const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
}


const take = async (item) =>{
  loading.value = true
  await takeTask(item.id).finally(() => loading.value = false)
  proxy.$toast.success(t("common.toast.success"));
}

const goDetail = (item) =>{
  router.push(`${router.currentRoute.value.path}/detail/${item.id}`)
}


// Data table options
const total = ref(0);
const data = ref([]);
const tableLoading = ref(false);
// Headers
const headers = [
  {
    title: "标题",
    key: "title",
    sortable: false,
  },
  {
    title: "描述",
    key: "description",
    sortable: false,
  },
  {
    title: "价格",
    key: "price",
    sortable: false,
  },
  {
    title: "类型",
    key: "type",
    sortable: false,
  },
  {
    title: "状态",
    key: "status",
    sortable: false,
    value: (item) => {
        return NORMAL_TASK_STATUS[item.status]
    }
  },
  {
    title: "添加时间",
    key: "createTime",
    sortable: false,
  },
  {
    title: "操作",
    key: "operate",
    sortable: false,
  }
];


function getList() {
  tableLoading.value = true;
  listTask(queryParams.value).then((res) => {
    data.value = res.rows;
    total.value = res.total;
    tableLoading.value = false;
  });
}
</script>
  
  <style lang="scss" scoped>
</style>